<template>
	<view>
		<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
			<view class="bck">
				<view style="width: 100%;height: 15px;"></view>
				<view class="img-bck">
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/背景图案.png" mode="widthFix"></image>
				</view>
				<scroll-view scroll-y="true">
					<view class="title">
						<view>
							邀请好友
						</view>
						<view>
							获取<text>专属神秘宝藏</text>
						</view>
					</view>
					<view class="qrcode">
						<view class="qrcode-bck">
							<!-- #ifdef H5 -->
							<canvas id="qrcode" canvas-id="qrcode"></canvas>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<image v-if="qrcodeUrl" :show-menu-by-longpress="true" :src="qrcodeUrl" mode="widthFix"></image>
							<!-- #endif -->
						</view>
						<view class="qrcode-download" @click="downloadQrcode">
							<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/download.png" mode="widthFix"></image>
						</view>
						<view>
							分享给好友扫一扫，成为宝藏猎人
						</view>
					</view>
					<view class="share">
						<view class="share-info">
							<view class="share-title">
								<view style="flex: 1;font-weight: 500;">
									当前邀请好友
								</view>
								<view style="color: #757575;font-size: 10px;" @click="openShareList">
									邀请记录
								</view>
							</view>
							<view class="share-count">
								<view class="">
									<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/share-count-left.png" mode="heightFix">
									</image>
								</view>
								<view style="justify-content: center;">
									{{helpNumber}}
								</view>
								<view class="">
									<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/share-count-right.png" mode="heightFix">
									</image>
								</view>
							</view>
							<view class="share-help">
								<view class="help-input">
									<input type="text" v-model="helpCode" placeholder="输入邀请码"
										placeholder-style="font-size: 12px;" />
								</view>
								<view @click="doHelp" class="help-btn">
									<view class="">
										帮TA助力
									</view>
								</view>
							</view>
							<view class="share-code">
								<view class="">
									我的邀请码
								</view>
								<view class="">
									{{myHelpCode}}
								</view>
							</view>
						</view>

					</view>
					
					<view class="share-config">
						<view class="sign-item" v-for="(item,index) in shareConfig" key="share">
							<view class="sign-item-top">
								<view style="flex: 1;padding: 2px;">
									<view class="sign-item-icon" >
										<view>
											<image style="width: 21px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/signin/icon-松果.png" mode="widthFix"></image>
										</view>
										<view style="height: 15px;">
											<image v-if="item.user_count <= helpNumber" style="width: 15px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/share-ok.png" mode="widthFix"></image>
											<text v-else style="font-size: 8px;">+{{item.reward}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="sign-item-bottom">
								<view class="" style="display: flex;width: 100%;background: transparent;">
									<view class="signline" :class="{ 'bck-black' : index > 0 && item.user_count <= helpNumber, 'bck-transparent': index === 0 }"></view>
									<view class="signcircle" :class="{ 'bck-black': item.user_count <= helpNumber }"></view>
									<view class="signline" :class="{ 'bck-black': (index+1) < shareConfig.length && item.user_count <= helpNumber , 'bck-transparent': (index+1) === shareConfig.length }"></view>
								</view>
								<view class="signtext">
									<text>邀{{item.user_count}}位</text>
								</view>
							</view>
						</view>
					</view>
					<view class="buttons">
						<view class="btn btn1" @click="copyCode">
							<view class="">
								<text>复制邀请码</text>
							</view>
							<view class="">
								邀请好友
							</view>
						</view>
						<!-- #ifdef H5 -->
						<view class="btn btn2" @click="copyUrl">
							分享链接
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<button class="btn btn2" open-type="share">
							分享链接
						</button>
						<!-- #endif -->
					</view>
					
				</scroll-view>
			</view>
		</touch-popup>
		
		<uni-popup ref="listPopup" style="z-index: 9999;" :safe-area="false" type="center">
			<view style="background: linear-gradient(180deg, #FFFFFF 0%, #F8FFCE 100%);width: 300px;height: 300px;border-radius: 15px;">
				<view class="list-title">
					<view class="list-title-top">
						我的邀请
					</view>
					<view style="padding: 10px 15px;" @click="closeShareList">
						<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/close.png" style="width: 10px;" mode="widthFix"></image>
					</view>
				</view>
				<scroll-view v-if="shareList.length > 0" scroll-y class="scroll-share-list">
					<view v-for="(item,index) in shareList" key="shareListKey" class="list-item">
						<view class="list-item-left">
							<image :src="item.avatar" mode="widthFix"></image>
						</view>
						<view class="list-item-center">
							<view class="list-item-center-top">
								{{item.nickname}}
							</view>
							<view class="list-item-center-bottom">
								{{item.create_time}}
							</view>
						</view>
						<view class="list-item-bottom">
							邀请成功
						</view>
					</view>
					
				</scroll-view>
				<view v-else-if="shareList.length === 0" class="no-share-list">
					暂无邀请记录
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	const app = getApp()
	import {
		ref,
		defineExpose,
		nextTick
	} from 'vue'
	// #ifdef H5
	import UQRCode from 'uqrcodejs'
	// #endif
	const popup = ref() // ref组件
	const listPopup = ref();

	const helpCode = ref('') // 输入邀请码帮助别人助力
	const myHelpCode = ref('') // 我的邀请码
	const helpNumber = ref(0) // 已邀请人数
	const shareConfig = ref([]); // 分享奖励 配置信息
	
	const shareList = ref(false); // 邀请记录列表
	
	// #ifdef MP-WEIXIN
	const qrcodeUrl = ref('')
	// #endif
	
	const openShareList = () => {
		uni.showLoading();
		listPopup.value.open();
		uni.request({
			url: app.globalData.requestUrl + '/api/user/share/list',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			method: 'GET',
			success(res) {
				console.log(res)
				shareList.value = res.data.data;
			},
			complete() {
				uni.hideLoading()
			}
		})
		
	}
	const closeShareList = () => {
		listPopup.value.close();
	}

	const doHelp = () => {
		if (!helpCode.value) return
		if (helpCode.value === myHelpCode.value) {
			uni.showToast({
				title: '不能为自己助力',
				icon: 'none'
			})
			return
		}
		uni.showLoading()
		uni.request({
			url: app.globalData.requestUrl + '/api/user/code/save',
			data: {
				code: helpCode.value
			},
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			method: 'POST',
			success(res) {
				if (res.data.code === 200) {
					uni.showToast({
						title: '已为TA助力成功',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			},
			complete() {
				uni.hideLoading()
			}
		})
	}
	const downloadQrcode = () => {
		// #ifdef H5
		const toast = '请截图页面发送给好友'
		// #endif
		// #ifdef MP-WEIXIN
		const toast = '长按保存二维码'
		// #endif
		uni.showToast({
			title: toast,
			icon: 'none'
		})
	}
	const copyCode = () => {
		uni.setClipboardData({
			data: myHelpCode.value,
			success: function() {
				uni.showToast({
					title: '邀请码复制成功',
					icon: 'success'
				})
			}
		})
	}
	const copyUrl = () => {
		uni.setClipboardData({
			data: (location.origin + location.pathname + '?code=' + myHelpCode.value),
			success: function() {
				uni.showToast({
					title: '链接复制成功',
					icon: 'success'
				})
			}
		})
	}
	const showQrcode = (code) => {
		// #ifdef H5
		const qr = new UQRCode()
		qr.data = location.origin + location.pathname + '?code=' + myHelpCode.value
		qr.size = 140
		qr.make()
		const canvasContext = uni.createCanvasContext('qrcode', this)
		qr.canvasContext = canvasContext
		qr.drawCanvas()
		// #endif
		// #ifdef MP-WEIXIN
		uni.request({
			url: app.globalData.requestUrl + '/api/user/wechat/qrcode',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success(res) {
				if (res.data.code === 200) {
					qrcodeUrl.value = res.data.data
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			}
		})
		// #endif
		
	}

	const loadData = (isOpen = false) => {
		uni.request({
			url: app.globalData.requestUrl + '/api/user/code',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success: (res) => {
				if (res.data.code === 200) {
					myHelpCode.value = res.data.data.code
					helpNumber.value = res.data.data.number
					app.globalData.userinfo.code = res.data.data.code
					uni.request({
						url: app.globalData.requestUrl + '/api/user/share/config',
						header: {
							'Authorization': 'Bearer ' + app.globalData.token
						},
						success: (res) => {
							console.log(res.data)
							shareConfig.value = res.data.data
							if (isOpen) {
								uni.hideLoading();
								popup.value.open()
								nextTick(() => {
									showQrcode();
								})
							}
						},
						fail() {
							if (isOpen) uni.hideLoading();
							uni.showToast({
								title: '获取奖励信息失败',
								icon: 'none'
							});
						}
					})
				} else {
					uni.showToast({
						title: '获取排行榜列表失败，请重试',
						icon: 'none'
					})
				}
			}
		})
	}
	const open = () => {
		if (myHelpCode.value) {
			popup.value.open()
			nextTick(() => {
				showQrcode()
			})
			loadData();
			return
		} else {
			uni.showLoading();
			loadData(true);
		}
	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.list-item-bottom {
		font-size: 12px;
		display: flex;
		align-items: center;
	}
	.list-item-center-bottom {
		color: #868686;
		flex: 1;
		display: flex;
		align-items: flex-end;
	}
	.list-item-center {
		display: flex;
		font-size: 12px;
		flex-direction: column;
		flex: 1;
	}
	
	.list-item-left {
		padding: 0 10px;
		display: flex;
	}
	.list-item-left image {
		width: 35px;
		height: auto;
		border-radius: 5px;
	}
	.scroll-share-list {
		/* display: flex; */
		height: 258px;
	}
	.list-item {
		display: flex;
		padding: 10px 15px;
	}
	.no-share-list {
		font-size: 12px;
		color: #868686;
		text-align: center;
		padding: 15px;
	}
	.list-title {
		display: flex;
	}
	.list-title-top {
		padding: 10px 15px;
		flex: 1;
		font-size: 14px;
	}
	.share-config {
		display: flex;
		align-items: center;
		padding: 15px;
		justify-content: center;
	}
	.sign-item {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.sign-item view {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.sign-item-top {
		flex: 1;
		display: flex;
	}
	.bck-black {
		background-color: #FFB800 !important;
	}
	.bck-transparent {
		background-color: transparent !important;
	}
	.sign-item-icon {
		padding: 4px 7px;
		flex-direction: column;
		border-radius: 6px;
		border: 2px solid transparent;
		box-sizing: border-box;
		background-color: #fff;
	}
	.sign-item-bottom {
		flex-direction: column;
		width: 100%;
		padding-top: 2px;
	}
	.signline {
		flex: 1;
		height: 3px;
		width: 100%;
		background-color: white;
	}
	.signcircle {
		height: 7px;
		width: 7px;
		border-radius: 3px;
		background-color: white;
	}
	.signtext {
		padding-top: 5px;
		font-family: Noto Sans S Chinese;
		font-size: 7.5px;
		font-weight: 400;
		line-height: 12px;
		color: #717171;
	}
	
	.btn {
		width: 256px;
		height: 49px;
		display: flex;
		flex-direction: column;
		border-radius: 20px;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
	}

	.btn1 text {
		color: #D0FF66;
		font-size: 16px;
	}

	.btn1 {
		background-color: #000;
		color: #9F9F9F;
		font-size: 12px;
		font-weight: 400;
	}

	.btn2 {
		background-color: #fff;
		font-size: 15px;
	}

	.buttons {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 9999;
		align-items: center;
		margin-top: 15px;
		justify-content: center;
	}

	.share-code view:last-child {
		justify-content: flex-end;
	}

	.share-code view {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.share-code {
		background-color: rgba(65, 255, 183, .8);
		font-size: 14px;
		font-weight: 500;
		display: flex;
		border-radius: 20px;
		padding: 10px 15px;
	}

	.help-input input {
		background-color: rgba(221, 221, 221, 0.8);
		border-radius: 10px;
		height: 28px;
		padding: 0 10px;
		font-size: 12px;
	}

	.help-input {
		flex: 1;
	}

	.help-btn view {
		background-color: rgba(170, 170, 170, 0.8);
		padding: 6px 10px;
		border-radius: 10px;
		color: #fff;
		font-size: 12px;
	}

	.help-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.share-help {
		padding: 10px 15px 15px 15px;
		display: flex;
	}

	.share-title {
		padding: 10px 15px;
		font-size: 14px;
		display: flex;
		align-items: center;
	}

	.share-count image {
		height: 36px;
	}

	.share-count view {
		flex: 1;
		display: flex;
		align-items: center;
		font-size: 30px;
		font-weight: 500;
		font-family: Noto Sans S Chinese;
	}

	.share-count view:first-child {
		justify-content: flex-end;
	}

	.share-count {
		display: flex;
	}

	.share-info {
		box-shadow: 0px 4px 5px 0px #00000040;
		background-color: #fff;
		border-radius: 20px;
		flex-direction: column;
		width: 300px;
		display: flex;
	}

	.share {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qrcode-download image {
		width: 25px;
	}

	.qrcode-download {
		position: absolute;
		right: calc(50% - 120px);
		bottom: 30px;
	}

	.qrcode view:last-child {
		padding: 8px;
		color: #626262;
		font-family: Noto Sans S Chinese;
		font-size: 12px;
		font-weight: 400;
		line-height: 18px;
	}

	.qrcode-bck canvas {
		width: 140px;
		height: 140px;
	}
	.qrcode-bck image {
		width: 100%;
		height: auto;
	}
	.qrcode-bck {
		background-color: #fff;
		border-radius: 20px;
		padding: 15px;
		width: 140px;
		height: 140px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qrcode {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 888;
		flex-direction: column;
	}

	.img-bck {
		position: absolute;
		top: 60px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title view:last-child {
		position: relative;
		z-index: 1;
		font-family: Noto Sans S Chinese;
		font-size: 24px;
		font-weight: 500;
		line-height: 36px;
		text-align: center;
	}

	.title text {
		color: #ffb800;
	}
	.title {
		display: flex;
		flex-direction: column;
		padding: 15px 30px;
		align-items: center;
		position: relative;
		
		font-family: Noto Sans S Chinese;
		font-size: 24px;
		font-weight: 400;
		line-height: 36px;
		text-align: center;
	}

	scroll-view {
		height: calc(100% - 15px);
	}

	.bck {
		height: 100%;
		background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/bck.png') no-repeat;
		background-size: 750rpx;
		background-position: bottom;
	}
</style>